@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
@import '../styles.module';

$sizes: 's', 'm';
$switchAnimationDuration: 0.1s;

.container {
  @include container('switch');
}

.box {
  position: relative;
  background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-activated');

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include composite-var($toggles, $size, 'switch', 'box');
    }
  }

  &[data-hover='true'] {
    background-color: simple-var($theme-variables, 'sys', 'neutral', 'accent-hovered');
  }

  &[data-disabled='true'] {
    background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
  }

  &[data-checked='true'] {
    background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
    &[data-hover='true'] {
      background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
    }
    &[data-disabled='true'] {
      background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
    }
  }
}

.containerFlag {
  position: absolute;
  left: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  transition-timing-function: linear;
  transition-duration: $switchAnimationDuration;
  transition-property: left;

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include composite-var($toggles, $size, 'switch', 'container-flag');
      &[data-checked='true'] {
        left: calc(100% - #{simple-var($toggles, $size, 'switch', 'container-flag', 'width')});
      }
    }
  }
}

.flag {
  background-color: simple-var($theme-variables, 'sys', 'neutral', 'on-accent');

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include composite-var($toggles, $size, 'switch', 'flag');
    }
  }

  &[data-disabled='true'] {
    background-color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
  }
}

@mixin flagIcon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: flex;

  color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');

  fill: transparent;

  transition: opacity $switchAnimationDuration linear;

  &[data-hover='true'] {
    color: simple-var($theme-variables, 'sys', 'neutral', 'accent-hovered');
  }

  &[data-checked='true'] {
    color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
    &[data-hover='true'] {
      color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
    }
  }

  &[data-disabled='true'] {
    color: simple-var($theme-variables, 'sys', 'neutral', 'on-accent');

    &[data-hover='true'] {
      color: simple-var($theme-variables, 'sys', 'neutral', 'on-accent');
    }
  }
}

.flag_icon_off {
  @include flagIcon();

  opacity: 1;
  &[data-checked='true'] {
    opacity: 0;
  }
}

.flag_icon_on {
  @include flagIcon();

  opacity: 0;
  &[data-checked='true'] {
    opacity: 1;
  }
}
